import Card from '@/components/Card';
import Description from '@/components/Description';
import {
  loadMonitorControllerGetMeterDevices,
  loadMonitorControllerRealtime,
} from '@/services/ess/loadMonitor';
import { useIntl, useModel } from '@umijs/max';
import { Col, ConfigProvider, Form, Row, Select } from 'antd';
import type { DescriptionsProps } from 'antd/es/descriptions';
import cls from 'classnames';
import React, { useEffect, useState } from 'react';
import Style from '../index.less';

const Index: React.FC = () => {
  const intl = useIntl();
  const { initialState } = useModel('@@initialState');
  const [defaultValue, setDefaultValue] = useState('');
  const [loadOptions, setLoadOptions] = useState<any[]>([]);
  const [RTOverview, setRTOverview] = useState<DescriptionsProps['items']>([
    {
      key: 'onlineState',
      label: intl.formatMessage({ id: 'data.onlineStatus' }),
      children: '',
    },
    {
      key: 'gridFreq',
      label: intl.formatMessage({ id: 'data.gridFrequency' }),
      children: '',
    },
    {
      key: 'powerFactor',
      label: intl.formatMessage({ id: 'data.powerFactor' }),
      children: '',
    },
    {
      key: 'activePower',
      label: intl.formatMessage({ id: 'data.totalActivePowerKw' }),
      children: '',
    },
    {
      key: 'reactivePower',
      label: intl.formatMessage({ id: 'data.totalReactivePowerKvar' }),
      children: '',
    },
    {
      key: 'apparentPower',
      label: intl.formatMessage({ id: 'data.totalApparentPowerKva' }),
      children: '',
    },
    {
      key: 'ia',
      label: intl.formatMessage({ id: 'data.ia' }),
      children: '',
    },
    {
      key: 'ib',
      label: intl.formatMessage({ id: 'data.ib' }),
      children: '',
    },
    {
      key: 'ic',
      label: intl.formatMessage({ id: 'data.ic' }),
      children: '',
    },
    {
      key: 'ua',
      label: intl.formatMessage({ id: 'data.ua' }),
      children: '',
    },
    {
      key: 'ub',
      label: intl.formatMessage({ id: 'data.ub' }),
      children: '',
    },
    {
      key: 'uc',
      label: intl.formatMessage({ id: 'data.uc' }),
      children: '',
    },
  ]);
  const [energyData, setenergyData] = useState<DescriptionsProps['items']>([
    {
      key: 'combinedActiveTotal',
      label: intl.formatMessage({ id: 'data.totalEnergy' }),
      children: '',
    },
    {
      key: 'combinedActiveTip',
      label: intl.formatMessage({ id: 'data.sharpEnergy' }),
      children: '',
    },
    {
      key: 'combinedActivePeak',
      label: intl.formatMessage({ id: 'data.peakEnergy' }),
      children: '',
    },
    {
      key: 'combinedActiveFlat',
      label: intl.formatMessage({ id: 'data.shoulderEnergy' }),
      children: '',
    },
    {
      key: 'combinedActiveValley',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedActiveOffPeakEnergy' }),
      children: '',
    },
    {
      key: 'positiveActiveTotal',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveActiveTotalEnergy' }),
      children: '',
    },
    {
      key: 'positiveActiveTip',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveActiveSharpEnergy' }),
      children: '',
    },
    {
      key: 'positiveActivePeak',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveActivePeakEnergy' }),
      children: '',
    },
    {
      key: 'positiveActiveFlat',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveActiveShoulderEnergy' }),
      children: '',
    },
    {
      key: 'positiveActiveValley',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveActiveOffPeakEnergy' }),
      children: '',
    },
    {
      key: 'reverseActiveTotal',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseActiveTotalEnergy' }),

      children: '',
    },
    {
      key: 'reverseActiveTip',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseActiveSharpEnergy' }),
      children: '',
    },
    {
      key: 'reverseActivePeak',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseActivePeakEnergy' }),
      children: '',
    },
    {
      key: 'reverseActiveFlat',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseActiveShoulderEnergy' }),
      children: '',
    },
    {
      key: 'reverseActiveValley',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseActiveOffPeakEnergy' }),
      children: '',
    },
    {
      key: 'combinedReactiveTotal',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedReactiveTotalEnergy' }),
      children: '',
    },
    {
      key: 'combinedReactiveTip',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedReactiveSharpEnergy' }),
      children: '',
    },
    {
      key: 'combinedReactivePeak',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedReactivePeakEnergy' }),
      children: '',
    },
    {
      key: 'combinedReactiveFlat',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedReactiveShoulderEnergy' }),
      children: '',
    },
    {
      key: 'combinedReactiveValley',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.combinedReactiveOffPeakEnergy' }),
      children: '',
    },
    {
      key: 'positiveReactiveTotal',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveReactiveTotalEnergy' }),
      children: '',
    },
    {
      key: 'positiveReactiveTip',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveReactiveSharpEnergy' }),
      children: '',
    },
    {
      key: 'positiveReactivePeak',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveReactivePeakEnergy' }),
      children: '',
    },
    {
      key: 'positiveReactiveFlat',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveReactiveShoulderEnergy' }),
      children: '',
    },
    {
      key: 'positiveReactiveValley',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.positiveReactiveOffPeakEnergy' }),
      children: '',
    },
    {
      key: 'reverseReactiveTotal',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseReactiveTotalEnergy' }),
      children: '',
    },
    {
      key: 'reverseReactiveTip',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseReactiveSharpEnergy' }),
      children: '',
    },
    {
      key: 'reverseReactivePeak',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseReactivePeakEnergy' }),
      children: '',
    },
    {
      key: 'reverseReactiveFlat',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseReactiveShoulderEnergy' }),
      children: '',
    },
    {
      key: 'reverseReactiveValley',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.reverseReactiveOffPeakEnergy' }),
      children: '',
      span: 1,
    },
  ]);

  const changeFunction = (key: any, result: any) => {
    if (key === 'onlineState') {
      if (result === 1) {
        return intl.formatMessage({ id: 'data.online' });
      } else if (result === 0) {
        return intl.formatMessage({ id: 'data.offline' });
      } else {
        return '--';
      }
    } else {
      return result;
    }
  };

  const changeLoad = (value: string) => {
    setDefaultValue(value);
    loadMonitorControllerRealtime({
      stationId: initialState?.stationId,
      deviceCode: value,
    }).then((res) => {
      const getRTOverview = RTOverview.map((item) => {
        return {
          ...item,
          children: changeFunction(item.key, res.data?.[item.key]),
        };
      });
      setRTOverview(getRTOverview);

      const getenergyData = energyData.map((item) => {
        return {
          ...item,
          children: res.data?.[item.key],
        };
      });
      setenergyData(getenergyData);
    });
  };

  useEffect(() => {
    /**
     * 获取PCS设备
     */
    loadMonitorControllerGetMeterDevices({ stationId: initialState?.stationId }).then((res) => {
      if (res.data && res.data.length > 0) {
        setLoadOptions(res.data);
        setDefaultValue(res.data[0].code);
        changeLoad(res.data[0].code);
      }
    });
  }, []);

  const lebelStyle = {
    width: 180,
  };

  return (
    <div>
      <ConfigProvider
        theme={{
          token: {
            screenXXLMin: 1920,
            screenXXL: 1920,
            screenXLMin: 1599,
            screenXL: 1599,
            screenLGMin: 1199,
            screenLG: 1199,
          },
        }}
      >
        <Card className="global-secondary-card">
          <Form
            colon={false}
            layout={'horizontal'}
            style={{ marginTop: '20px' }}
            labelCol={{
              flex: `0 0 180px`,
            }}
          >
            <Row gutter={0}>
              <Col {...{ xxl: 6, xl: 6, lg: 8, md: 12, sm: 24 }}>
                <Form.Item
                  style={{ width: '100%' }}
                  label={intl.formatMessage({ id: 'siteManage.load' })}
                >
                  <Select
                    value={defaultValue}
                    options={loadOptions}
                    placeholder={intl.formatMessage({
                      id: 'remoteUpgradeMangment.siteConfigurationManagement.pleaseChoose',
                    })}
                    fieldNames={{
                      label: 'name',
                      value: 'code',
                    }}
                    onChange={changeLoad}
                  ></Select>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>
        <Card
          title={intl.formatMessage({ id: 'overviewPages.realTime' })}
          className="global-secondary-card"
        >
          <Description
            items={RTOverview}
            column={{ xxl: 3, xl: 3, lg: 3, md: 2, sm: 1 }}
            labelStyle={lebelStyle}
            className={cls(Style.descriptionsImplemente)}
          />
        </Card>
        <Card
          title={intl.formatMessage({ id: 'stationRealtimeMonitoring.energyData' })}
          className="global-secondary-card"
        >
          <div className={Style.energyWrapper}>
            <Description
              items={energyData}
              column={{ xxl: 3, xl: 3, lg: 3, md: 2, sm: 1 }}
              labelStyle={lebelStyle}
              className={cls(Style.descriptionsImplemente)}
            />
          </div>
        </Card>
      </ConfigProvider>
    </div>
  );
};

export default Index;
